<template>

  <el-card>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="获取经验值" name="first">
        <div class="flex gap-4 mb-4" v-for="(item,index) in exList" :key="index">
          <span style="width: 180px;text-align: left">{{ item.configName }}</span>
          <el-input-number v-model="item.configValue" :min="1"  />
          <el-button type="primary" @click="exsubmitForm(item)">保存</el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane label="会员权益" name="second">
        <div class="flex gap-4 mb-4" v-for="(item,index) in hyqyList" :key="index">
          <span style="width: 260px;text-align: left">{{ item.configName }}</span>
          <el-input-number v-model="item.configValue" :min="1"  />
          <el-button type="primary" @click="exsubmitForm(item)">保存</el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane label="分销设置" name="third">
        <div class="flex gap-4 mb-4" v-for="(item,index) in fxList" :key="index">
          <span style="width: 260px;text-align: left">{{ item.configName }}</span>
          <el-input-number v-model="item.configValue" :min="1"  />
          <el-button type="primary" @click="exsubmitForm(item)">保存</el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane label="约局设置" name="fourth">
        <div class="flex gap-4 mb-4" v-for="(item,index) in yjList" :key="index">
          <span style="width: 260px;text-align: left">{{ item.configName }}</span>
          <el-select
            v-model="item.configValue"
            placeholder="请选择是否自动审核"
            size="large"
            style="width: 240px"
          >
            <el-option
              key="true"
              label="是"
              value="true"
            />
            <el-option
              key="false"
              label="否"
              value="false"
            />
          </el-select>
          <el-button type="primary" @click="exsubmitForm(item)">保存</el-button>
        </div>
      </el-tab-pane>
<!--      <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>-->
    </el-tabs>
  </el-card>

</template>

<script setup name="experience" lang="ts">
import { listConfig, getConfig, delConfig, addConfig, updateConfig, refreshCache } from '@/api/system/config';
import {TabsPaneContext} from "element-plus";
import {ConfigForm, ConfigQuery} from "@/api/system/config/types";
const activeName = ref('first')
const exList = ref([])
const hyqyList = ref([])
const fxList = ref([])
const yjList = ref([])
const {proxy} = getCurrentInstance() as ComponentInternalInstance;
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab.props.name, event)
  getPdHandle(tab.props.name)
}

const getPdHandle= async(name) =>{
  if (name == 'first'){
    getList();
  }
  if (name == 'second'){
    getHyqyList();
  }
  if (name == 'third'){
    getFenXiaoList();
  }
  if (name == 'fourth'){
    getYueJuKust();
  }
}
const data = reactive<PageData<ConfigForm, ConfigQuery>>({
  queryParams: {
    pageNum: 1,
    pageSize: 1000,
    configName: '',
    configKey: 'get_jingyan_',
    configType: ''
  }
});
const dateRange = ref<[DateModelType, DateModelType]>(['', '']);
const { queryParams } = toRefs(data);
/** 查询参数列表 */
const getList = async () => {
  queryParams.value.configKey = "get_jingyan_"
  const res = await listConfig(proxy?.addDateRange(queryParams.value, dateRange.value));
  exList.value = res.rows
  console.log(res.rows)
};
/** 提交按钮 */
const exsubmitForm = async (row) => {
  row.configId ? await updateConfig(row) : await addConfig(row);
  proxy?.$modal.msgSuccess('操作成功');
  await getList();
};
const getHyqyList = async () => {
  queryParams.value.configKey = "get_huiyuan_"
  const res = await listConfig(proxy?.addDateRange(queryParams.value, dateRange.value));
  hyqyList.value = res.rows
  console.log(res.rows)
};

const getFenXiaoList = async () => {
  queryParams.value.configKey = "get_fenxiao_"
  const res = await listConfig(proxy?.addDateRange(queryParams.value, dateRange.value));
  fxList.value = res.rows
  console.log(res.rows)
};
const getYueJuKust = async () => {
  queryParams.value.configKey = "yue_ju_zi_dong_sheng_he"
  const res = await listConfig(proxy?.addDateRange(queryParams.value, dateRange.value));
  yjList.value = res.rows
  console.log(res.rows)
};
onMounted(() => {
  getList();
});
</script>

<style scoped>

</style>
